<template>
	<div class="dispatch">
		<!-- 工具栏 -->
		<Toolbar>
			<template #left>
				<div class="left-item">
					<span>处置单位：</span>
					<el-select v-model="searchInfo.unitId" placeholder="请选择" size="small">
						<el-option
							v-for="item in select_unit"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</div>
				<div class="left-item">
					<span>案发时间：</span>
					<el-date-picker
						v-model="searchInfo.caseTime"
						type="date"
						@change="changeDate"
						size="small"
						placeholder="选择日期"
					></el-date-picker>
				</div>
			</template>
			<template #right>
				<div class="right-item mr10">
					<el-button size="small" type="info" plain @click="remake">重置</el-button>
				</div>
				<div class="right-item">
					<el-button size="small" type="info" @click="queryTable">查询</el-button>
				</div>
			</template>
		</Toolbar>

		<!-- 表格展示 -->
		<div class="table mt15">
			<el-table :data="tableData" border style="width: 100%" v-loading="loading">
				<el-table-column type="index" align="center"></el-table-column>
				<el-table-column align="center" prop="caseType" label="灾情类型">
					<template #default="{ row }">
						<span>{{ row.caseType | getType }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="caseTime" label="案发时间"></el-table-column>
				<el-table-column align="center" prop="caseAddress" label="灾情位置">
					<template #default="{ row }">
						<el-popover placement="top-start" trigger="hover" :content="row.caseAddress">
							<span style="width: 100%; display: block" class="OPoint" slot="reference">
								{{ row.caseAddress }}
							</span>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="casePerson" label="受灾人员"></el-table-column>
				<el-table-column align="center" prop="caseBuild" label="受灾建筑"></el-table-column>
				<el-table-column align="center" prop="caseArea" label="受灾面积"></el-table-column>
				<el-table-column align="center" prop="caseReason" label="灾情原因">
					<template #default="{ row }">
						<el-popover placement="top-start" trigger="hover" :content="row.caseReason">
							<span style="width: 100%; display: block" class="OPoint" slot="reference">
								{{ row.caseReason }}
							</span>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="manageUnit" label="主管单位"></el-table-column>
				<el-table-column align="center" prop="caseStatus" label="状态">
					<template #default="{ row }">
						<span class="FontColorWarn" v-if="row.caseStatus == 1">处理中</span>
						<span class="FontColorSuccess" v-else>已结案</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作">
					<template #default="{ row }">
						<el-button type="text" size="mini" @click="linkToDispatch(row)">调度</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 翻页 -->
		<div class="switchTable">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="searchInfo.pageNum"
				:page-size="searchInfo.pageSize"
				:page-sizes="[10, 20, 50]"
				:total="totalPage"
				background
				layout="sizes, prev, pager, next, jumper"
			></el-pagination>
		</div>
	</div>
</template>
 
<script>
import { getDispatchInfoApi, getOrgUnitApi } from '@/utils/api';
import { turnPage } from '@/mixins/turnPage';

export default {
	mixins: [turnPage],
	name: 'Dispatch',
	data() {
		return {
			loading: false,
			tableData: [] /* 表格数据 */,
			totalPage: 1 /* 表格总数 */,
			select_unit: [],
			searchInfo: {
				pageNum: 1,
				pageSize: 10,
				unitId: '',
				caseStatus: '1',
				caseTime: ''
			} /* 检索信息 */
		};
	},
	created() {
		this.init();
	},
	filters: {
		getType(val) {
			switch (val) {
				case '1':
					return '火灾扑救';
				case '2':
					return '抢险救援';
				case '3':
					return '社会救助';
				default:
					return '其他灾情';
			}
		}
	},
	methods: {
		// 初始化
		init() {
			this.queryTable();
			this.getOrgUnit();
		},

		changeDate(val) {
			this.searchInfo.caseTime = $xy.FD(val);
		},

		// 重制
		remake() {
			this.searchInfo = {
				pageNum: 1,
				pageSize: 10,
				unitId: '',
				caseStatus: '1',
				caseTime: ''
			};

			this.queryTable();
		},

		// 获取主管单位列表
		async getOrgUnit() {
			const res = await getOrgUnitApi();

			if (res.success) {
				this.select_unit = [];

				res.data.map((item) => {
					this.select_unit.push({
						value: item.orgId,
						label: item.orgName
					});
				});
			} else {
				this.$toast(res.msg);
			}
		},

		// 查询表格数据
		async queryTable() {
			this.loading = true;
			const res = await getDispatchInfoApi(this.searchInfo);
			this.loading = false;

			if (res.success) {
				this.totalPage = res.data.total;
				this.tableData = res.data.list;
			} else {
				this.$toast(res.msg);
			}
		},

		// 调转调度页面
		linkToDispatch(row) {
			this.$router.push({
				path: '/detail',
				query: {
					detail: encodeURIComponent(JSON.stringify(row))
				}
			});
		}
	}
};
</script>
 
<style lang="scss">
.dispatch {
	padding: 20px;
	font-size: 14px;

	.left-item {
		& > span {
			font-size: 13px;
			color: #666;
			margin-right: 5px;
		}

		.el-select {
			margin-right: 20px;
		}
	}

	.switchTable {
		display: flex;
		justify-content: flex-end;
		margin-top: 15px;
	}
}
</style>